<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

    <div id="box">

    </div>

    <!-- <p>我是追加的子!!!!!元素</p> -->

    <script>

        $("#box").append(`
            <ul>
                <li>茶</li>
                <li>咖啡</li>
                <li>奶茶</li>
            </ul>
        `)

        $("#box").css('backgroundColor', 'red')
        
        // var box = document.getElementById("box");
        // document.getElementById("box").appendChild('<p>我是追加的子元素</p>')
        // $("#box").append('<p>我是追加的子元素</p>')

        // js追加子元素
        // var p = document.createElement("p");  
        // p.innerHTML = "我是1111111素"
        // var box = document.getElementById("box");
        // box.appendChild(p);

        // var box = document.getElementById("box");
        // var box2 = $("#box");


        // $("#box").append('<ul>' +
        //     '<li>1</li>' +
        //     '<li>2</li>' +
        //    ' <li>3</li>' +
        // '</ul>')

        




        // document.getElementById("name")
        // $("#name")


        // document.getElementsByClassName("name")
        // $(".name")







    </script>
    
</body>
</html>